<template>
    <div>
        <center>
            <h1 style="margin-top: 0;">{{ creating ? "新建角色" : "修改角色" }}</h1>
        </center>
        <el-form :model="role">
            <el-row>
                <el-col :span="8" :offset="6">
                    <el-form-item label="角色名称" label-width="80px">
                        <el-input v-model="role.roleName" placeholder="请输入角色名称"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :offset="6" :span="18">
                    <div class="el-form-item">
                        <label class="el-form-item__label" style="width: 80px;">角色权限</label>
                        <el-transfer v-model="authority" :data="data" :titles="['未选择', '已选择']"></el-transfer>
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" :offset="6">
                    <el-form-item label="角色描述" label-width="80px">
                        <el-input v-model="role.roleDescription" placeholder="请输入角色描述" type="textarea" :rows="5"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3" :offset="7">
                    <el-button type="info" style="width: 100%;" @click="back">取消</el-button>
                </el-col>
                <el-col :span="3" :offset="4">
                    <el-button type="primary" style="width: 100%;" @click="confirm">{{ creating ? "创建" : "修改" }}</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { createRole, modifyRole } from '@/api/province/roleManage'

export default {
    name: "createRole",
    data() {
        const generateData = _ => {
            const data = [
                {
                    key: 1,
                    label: '填报备案数据'
                },
                {
                    key: 2,
                    label: '填报调查期数据'
                },
                {
                    key: 3,
                    label: '审批备案数据'
                },
                {
                    key: 4,
                    label: '审批调查期数据'
                },
                {
                    key: 5,
                    label: '用户管理'
                },
                {
                    key: 6,
                    label: '角色管理'
                },
                {
                    key: 7,
                    label: '调查期管理'
                },
                {
                    key: 8,
                    label: '数据可视化分析'
                },
                {
                    key: 9,
                    label: '查询企业备案信息'
                },
                {
                    key: 10,
                    label: '查询企业历史报表'
                },
                {
                    key: 11,
                    label: '修改企业报表'
                },
                {
                    key: 12,
                    label: '发送通知'
                },
                {
                    key: 13,
                    label: '数据导出'
                }
            ];
            return data;
        };

        return {
            data: generateData(),
            creating: false,
            authority: []
        }
    },
    props: {
        role: {
            type: Object,
            required: true
        }
    },
    created() {
        // console.log(this.role)
        if (this.role.roleName == null)
            this.creating = true
        else {
            this.creating = false
            let i = 0
            while (this.role.roleAuthority > 0) {
                if (this.role.roleAuthority % 2 == 1)
                    this.authority.push(i)
                this.role.roleAuthority = this.role.roleAuthority >> 1
                i++
            }
        }
    },
    methods: {
        back() {
            // location.reload()
            this.$emit("update-parameter")
        },
        confirm() {
            if (this.role.roleName == null) {
                this.$message({
                    message: '角色名称不能为空',
                    type: 'warning'
                })
            }
            else {
                let action = this.creating ? createRole : modifyRole
                this.role.roleAuthority = 0
                this.authority.forEach(a => this.role.roleAuthority += 1 << a)
                action(this.role).then(response => {
                    this.$message({
                        message: (this.creating ? "创建" : "修改") + '成功',
                        type: 'success'
                    })
                    setTimeout(this.back, 1000)
                })
            }
        }
    }
}
</script>